<template>
    <div class="shopcart" v-show="visible" @click="changeVisible">
        <!-- @click.事件修饰符/ -->
        <!-- @click.stop 阻止事件冒泡 -->
        <!-- @click.ctrl 只有同时按下ctrl键并点击才会触发 -->
        <!-- @click.right 只有按下鼠标右键才会触发 -->
        <!-- @click.native 给子组件绑定原生事件,只有添加active修饰符才会触发 -->
        <div class="content" @click.stop="handleClick">
            <div class="title">
                <span>已选商品</span>
                <span @click="clean">清空</span>
            </div>
            
            <div v-if="shopcartlist.length != 0" class="list">
                <div v-for="(item,index) in shopcartlist" :key="index" class="good">
                    <div class="imgbox">
                        <img :src="item.pic" alt="">
                    </div>
                    <div class="text">
                        <div class="name">{{item.name}}</div>
                        <div class="price">
                            <div>¥{{item.min_price}}</div>
                            <div>
                                <span @click="request_shopcart_sub(item)">-</span>
                                <span>{{item.count}}</span>
                                <span @click="request_shopcart_add(item)">+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="empty" >购物车空空如也,去逛逛!</div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F26%2F20210226073347_50f94.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131440&t=6df291a148cdb21289e91211d4daea32';

export default {
    data(){
        return {
            visible:false,
            // list:[
            //     { name:'秋刀鱼',price:88,pic,count:1 },
            //     { name:'大黄鱼',price:777,pic,count:2 },
            //     { name:'皮皮虾',price:9,pic,count:3 },
            // ]
        }
    },
    computed:{
        ...mapState(['shopcartlist']),
    },
    methods:{
        // ...mapActions(['request_fav','request_unfav','request_shopcart_add',]),
        ...mapActions(['request_clear','request_shopcart_add','request_shopcart_sub']),
        changeVisible(){
            this.visible = !this.visible;//让购物车显示/隐藏
        },
        // add(item){
        //     item.count++;
        // },
        // sub(item){
        //     if( item.count > 0 )item.count--;
        // },
        clean(){
            this.request_clear()
        },
        handleClick(){
            // console.log('触发了!');
        }
    }
}
</script>

<style lang='scss' scoped>

.shopcart{
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
}
.content{
    position: absolute;
    bottom: 0;
    background-color: white;
    width: 100%;
    padding: 10px 10px 70px;
    box-sizing: border-box;
}
.content .title{
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.content .list .good{
    display: flex;
    margin: 10px 0;
}
.content .list .good .imgbox{
    width: 80px;
    margin-right: 10px;
}
.content .list .good .imgbox img{
    width: 100%;
}
.content .list .good .text{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.content .list .good .text .name{
    font-weight: bold;
}
.content .list .good .text .price{
    display: flex;
    justify-content: space-between;
}
.content .list .good .text .price span{
    display: inline-block;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    background-color: lightskyblue;
    color: white;
    border-radius: 50%;
}
.content .list .good .text .price span:nth-child(2){
    color: black;
    background-color: white;
}
.empty{
    text-align: center;
    padding: 50px;
}
</style>